<template>
  <div class="mobile-card" :class="{ 'with-actions': hasActions, 'is-clickable': clickable }">
    <div class="card-header" v-if="title || $slots.header">
      <slot name="header">
        <div class="card-title">{{ title }}</div>
      </slot>
    </div>
    <div class="card-content">
      <div v-if="$slots.media" class="card-media">
        <slot name="media"></slot>
      </div>
      <div class="card-body">
        <slot>
          <!-- 默认内容展示为字段列表 -->
          <div v-if="fields && fields.length" class="field-list">
            <div v-for="(field, index) in displayFields" :key="index" class="field-item">
              <div class="field-label">{{ field.label }}</div>
              <div class="field-value" :class="{ 'text-primary': field.primary, 'text-secondary': field.secondary }">
                <slot :name="`field-${field.name}`" :field="field" :value="field.value">
                  {{ formatFieldValue(field) }}
                </slot>
              </div>
            </div>
          </div>
        </slot>
      </div>
    </div>
    <div v-if="$slots.footer || hasActions" class="card-footer">
      <slot name="footer">
        <div v-if="hasActions" class="card-actions">
          <button 
            v-for="(action, index) in actions" 
            :key="index" 
            class="action-btn" 
            :class="action.type" 
            @click="handleAction(action)"
          >
            <i v-if="action.icon" :class="action.icon"></i>
            {{ action.text }}
          </button>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MobileCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    fields: {
      type: Array,
      default: () => []
    },
    maxFields: {
      type: Number,
      default: 4
    },
    actions: {
      type: Array,
      default: () => []
    },
    clickable: {
      type: Boolean,
      default: false
    },
    formatters: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['click', 'action'],
  computed: {
    hasActions() {
      return this.actions && this.actions.length > 0
    },
    displayFields() {
      if (!this.maxFields || this.fields.length <= this.maxFields) {
        return this.fields
      }
      return this.fields.slice(0, this.maxFields)
    }
  },
  methods: {
    handleAction(action) {
      this.$emit('action', action)
    },
    formatFieldValue(field) {
      // 使用自定义格式化器
      if (field.name && this.formatters[field.name]) {
        return this.formatters[field.name](field.value)
      }
      
      // 空值处理
      if (field.value === null || field.value === undefined) {
        return field.emptyText || '暂无'
      }
      
      // 日期类型特殊处理
      if (field.type === 'date' && field.value) {
        return this.formatDate(field.value)
      }
      
      // 标签类型特殊处理
      if (field.type === 'tag' && field.options) {
        const option = field.options.find(opt => opt.value === field.value)
        return option ? option.label : field.value
      }
      
      return field.value
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      if (isNaN(date.getTime())) return dateStr
      
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.mobile-card {
  background: white;
  border-radius: var(--border-radius-md);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: #333;
}

.card-content {
  display: flex;
  flex-direction: column;
}

.card-media {
  width: 100%;
  overflow: hidden;
}

.card-media img {
  width: 100%;
  height: auto;
  display: block;
}

.card-body {
  padding: 16px;
}

.field-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label {
  font-size: var(--font-size-sm);
  color: #666;
}

.field-value {
  font-size: var(--font-size-md);
  color: #333;
  word-break: break-word;
}

.text-primary {
  color: #1890ff;
}

.text-secondary {
  color: #999;
}

.card-footer {
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  border: none;
  border-radius: var(--border-radius-sm);
  background: #f5f5f5;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-btn.primary {
  background-color: #1890ff;
  color: white;
}

.action-btn.danger {
  background-color: #ff4d4f;
  color: white;
}

.action-btn.success {
  background-color: #52c41a;
  color: white;
}

.action-btn.warning {
  background-color: #faad14;
  color: white;
}

.action-btn i {
  font-size: 14px;
}

/* 可点击卡片的样式 */
.is-clickable {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.is-clickable:active {
  transform: translateY(1px);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

/* 带操作按钮的卡片 */
.with-actions .card-footer {
  padding: 8px 16px;
}

/* 响应式布局，在大屏幕下字段可以并排 */
@media (min-width: 576px) {
  .field-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
</style>